<template>
	<view>
		<view class="container">
			<view class="topSearch">
				<image src="../../static/mine_1.png" @click="back"></image>
				<u-search :clearabled="true"  v-model="key" bgColor='#fff' :animation="true" @custom='doSearch' ></u-search>
			</view>
			<view class="zw"></view>
			<view class="goodsList">
				<view class="good" v-for="(good, key) in foodList" :key="key">
					<view class="image" v-if="good.imgePath">
						<u-lazy-load border-radius='10' :image="good.imgePath"  height='180'
							img-mode="aspectFill" :duration='300' style="width: 180rpx !important;"></u-lazy-load>
					</view>
					<image src="../../static/null.jpg" class="image" mode="aspectFill" v-else ></image>
					<view :class="good.foodName!=='温馨提示'?'right':'price_and_tip'">
						<text class="name">{{ good.foodName }}</text>
						<text class="tips">{{ good.clickAlertMess }}</text>
						<view class="price_and_action" v-if="good.foodName!=='温馨提示'">
							<view class="">
								<text style="color: rgb(252,31,31);">¥</text>
								<text class="price">{{ good.price }}</text>
							</view>
							<view class="btn-group" v-if="Number(good.skuNums) > 1 || (good.tasteGroupList && good.tasteGroupList != '[]')">
								<button type="primary" class="btn property_btn"
									hover-class="none" size="mini"
									@tap="showGoodDetailModal(good,0)">
									选规格
								</button>
								<view class="dot" v-show="goodCartNum(good.foodId)">
									{{ goodCartNum(good.foodId) }}</view>
							</view>
							<view class="btn-group" v-else>
								<button type="default" v-show="goodCartNum(good.foodId)" plain
									class="btn reduce_btn" size="mini" hover-class="none"
									@tap="handleReduceFromCart(good)">
									<view class="iconfont iconsami-select"></view>
								</button>
								<view class="number" v-show="goodCartNum(good.foodId)">
									{{ goodCartNum(good.foodId) }}</view>
								<button type="primary" class="btn add_btn" size="min"
									hover-class="none"
									@tap="showGoodDetailModal(good,1)">
									<view class="iconfont iconadd-select"></view>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 购物车栏 begin -->
			<view class="cart-box" style="position: fixed;bottom: 0;z-index: 9;">
				<view class="mark">
					<image src="../../static/cart.png" class="cart-img" @tap="openCartPopup"
						:class="addCart?'imgAnimation':''"></image>
					<view class="tag">{{ getCartGoodsNumber }}</view>
				</view>
				<view class="price">
					<view>
						<text class="iconText">¥</text>
						<a v-if="cart.length>0">{{Number(getCartGoodsPrice).toFixed(2)}} </a>
						<a v-else>0</a>
					</view>
					<view class="deliveryFee" v-if="cart.length>0">
						配送费{{minDeliveryFee}}元
					</view>
			
			
				</view>
				<button type="primary" class="pay-btn" @tap="toPay" :disabled="disabledPay">
					{{ disabledPay ? `差${spread}元起送` : '去结算' }}
				</button>
				
			</view>
			<!-- 购物车栏 end -->
			<view class="zw1"></view>
			
			<!-- 商品详情模态框 begin -->
			<u-popup v-model="goodDetailModalVisible" mode="bottom">
				<view style="80vh" class="good-detail-modal">
					<view class="cover">
						<image :src="good.imgePath || '../../static/null.jpg'" class="image"></image>
						<view class="">
							<view class="name" style="margin-bottom: 30px;font-size: 18px;">{{ good.foodName }}</view>
							<text style="color: rgb(252,31,31);font-weight: bold;">¥</text>
							<text class="price" v-if="units.length==1">{{ units[0].price }}<text
									class="priceTip">{{units[0].unit}}</text></text>
							<text class="price" v-if="units.length>1">{{ showUnits.price }}<text
									class="priceTip">{{showUnits.unit}}</text></text>
						</view>
						<view class="btn-group">
							<image src="/static/images/menu/close.png" @tap="closeGoodDetailModal"></image>
						</view>
					</view>
					<scroll-view class="detail" scroll-y>
						<view class="wrapper">
							<view class="basic" v-if=" good.clickAlertMess">
								<view class="tips">{{ good.clickAlertMess }}</view>
							</view>
							<!-- 规格选择 -->
							<view class="properties" v-if="units.length>1">
								<view class="property">
									<view class="title">
										<text class="name">规格</text>
									</view>
									<view class="values">
										<view class="value" v-for="(item, index) in units" :key="index"
											:class="{'default': item.is_default}"
											@tap="changePropertyDefault(index,item)">
											{{ item.unit }}
										</view>
									</view>
								</view>
							</view>
							<!-- 备注选择 -->
							<view class="properties" v-if="tasteGroupList">
								<view class="property" v-for="(item, index) in tasteGroupList" :key="index">
									<view class="title">
										<text class="name">{{ item.groupName }}</text>
									</view>
									<view class="values">
										<view class="value" v-for="(value, key) in item.detailList" :key="key"
											:class="{'default': value.isDefault == '1'}"
											@tap="changeGroupDefault(index, key)">
											{{ value.notesName }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="action">
						<view class="left">
							<view class="price" v-if="units.length==1">￥{{ units[0].price }}</view>
							<view class="price" v-if="units.length>1">￥{{ showUnits.price }}</view>

						</view>
						<view class="btn-group">
							<button type="default" plain class="btn" size="mini" hover-class="none"
								@tap="handlePropertyReduce">
								<view class="iconfont iconsami-select"></view>
							</button>
							<view class="number">{{ good.number }}</view>
							<button type="primary" class="btn" size="min" hover-class="none" @tap="handlePropertyAdd">
								<view class="iconfont iconadd-select"></view>
							</button>
						</view>
					</view>
					<view class="add-to-cart-btn" @tap="handleAddToCartInModal">
						<view>加入购物车</view>
					</view>
				</view>
			</u-popup>

			<!-- 商品详情模态框 end -->
			<!-- 购物车详情popup -->
			<popup-layer direction="top" :show-pop="cartPopupVisible" class="cart-popup" >
				<template slot="content">
					<view class="top">
						<text>包装费 ￥{{Number(getCartPackagingFee).toFixed(2)}}</text>
						<text @tap="handleCartClear">清空</text>
					</view>
					<scroll-view class="cart-list" scroll-y>
						<view class="wrapper">
							<view class="item" v-for="(item, index) in cart" :key="index">
								<view class="left">
									<view class="name">{{ item.name }}</view>
									<view class="props">{{ item.showUnit }} {{ item.showGroup }}</view>
								</view>
								<view class="center">
									<text>￥{{ item.price }}</text>
								</view>
								<view class="right">
									<button type="default" plain size="mini" class="btn" hover-class="none"
										@tap="handleCartItemReduce(index)">
										<view class="iconfont iconsami-select"></view>
									</button>
									<view class="number">{{ item.number }}</view>
									<button type="primary" class="btn" size="min" hover-class="none"
										@tap="handleCartItemAdd(index)">
										<view class="iconfont iconadd-select"></view>
									</button>
								</view>
							</view>

						</view>
					</scroll-view>
				</template>
			</popup-layer>
			
			<!-- 购物车详情popup -->
		</view>


	</view>
</template>

<script>
	import modal from '@/components/modal/modal'
	import popupLayer from '@/components/popup-layer/popup-layer'

	export default {
		components: {
			modal,
			popupLayer
		},
		data() {
			return {
				goods: [], //所有商品
				goodsList: [],
				units: [], //弹框规格列表
				chooseNum: 1,
				foodList:[],
				key:'',
				loading: false,
				currentCateId: 0, //默认分类
				cateScrollTop: 0.1,
				menuScrollIntoView: '',
				cart: [], //购物车
				goodDetailModalVisible: false, //是否餐品详情模态框
				good: {}, //当前餐品
				
				cartPopupVisible: false,
				sizeCalcState: false,
				skeletonLoading: true,
				addCart: false,
				skeletonList: ['', '', '', '', '', '', ],
				tasteGroupList: null, //备注列表
				showUnits: {}, //选中规格
				group: '', //选择备注
				showGroup: '', //展示选择备注
				clickFlag: false, //防重复点击
				shopId: '', //商家id
				minCost: 0, //起送价
				minDeliveryFee: 0, //配送费
				seller: {}, //商家信息
				imgHeight: 0,
				hllId: 0,
			}
		},
		 onLoad(e) {
			this.shopId = e.shopId
			this.hllId = e.id
			this.$wxHide()
			this.getShop()
			var cart = uni.getStorageSync('cart')
			if(cart){
				uni.showLoading({
					title:'加载中'
				})
				this.cart = uni.getStorageSync('cart')
				uni.hideLoading()
			}
		},
		computed: {
			goodCartNum() { //计算单个餐品添加到购物车的数量
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			menuCartNum() {
				return (id) => this.cart.reduce((acc, cur) => {
					if (cur.cate_id === id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
			getCartGoodsNumber() { //计算购物车总数
				return this.cart.reduce((acc, cur) => acc + cur.number, 0)
			},
			getCartGoodsPrice() { //计算购物车总价
				if (this.cart.length == 0) {
					return 0
				} else {
					var price = Number(this.cart.reduce((acc, cur) => acc + cur.number * cur.price + cur.number * cur
						.takeoutPackagingFee, 0))
					return Number(this.minDeliveryFee) + price
				}
			},
			getCartPackagingFee() { //计算购物车打包费
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.takeoutPackagingFee, 0)
			},
			disabledPay() { //是否达到起送价
				return (this.getCartGoodsPrice < this.minCost) ? true : false
			},
			spread() { //差多少元起送
				return parseFloat((this.minCost - this.getCartGoodsPrice).toFixed(2))
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			//搜索点击
			doSearch(){
				if(!this.key){
					uni.showToast({
						icon:'none',
						title:'请输入菜品关键词'
					})
				}else{
					this.getData()
				}
			},
			
			getData() {
				var that = this;
				uni.showLoading({
					title:'搜索中',
					mask:true
				})
				that.uni_request({
					url:'/api/food/searchFood',
					method: 'POST',
					data: {
						foodName:that.key,
						shopId:that.hllId
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							that.foodList = res.data.data;
							if (that.foodList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}
			
						} else {
							that.nullInfo = true
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e) {
			
					}
				})
			},
			
			//查询商家配送费等信息
			getShop() {
				var that = this;
				that.uni_request({
					url: '/api/shop/' + this.shopId,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.minCost = res.data.data.minCost;
							that.minDeliveryFee = res.data.data.minDeliveryFee;
							that.seller = res.data.data;
						}
					},
					fail(e) {
						uni.hideLoading()
					},
				})
			},
			
			//选择规格
			chooseSku(index, i, item) {
				this.skus[index] = item
				this.$forceUpdate()

			},

			handleMenuTap(id) { //点击菜单项事件
				if (!this.sizeCalcState) {
					this.calcSize()
				}
				this.currentCateId = id
				this.$nextTick(() => this.cateScrollTop = Number(this.goodsList.find(item => item.id == id).top + 5))
			},
			
			//遍历数组 整合所选备注
			checkGroup() {
				for (var k = 0; k < this.tasteGroupList.length; k++) {
					if (this.tasteGroupList[k].isChoose.length > 0) {
						var data = {}
						data.isChoose = this.tasteGroupList[k].isChoose;
						data.groupName = this.tasteGroupList[k].groupName
						if (this.group.length > 0) {
							this.group = this.group + ';' + data.groupName + ':' + data.isChoose
							this.showGroup = this.showGroup + ',' + data.isChoose
						} else {
							this.group = data.groupName + ':' + data.isChoose
							this.showGroup = data.isChoose
						}
					}
				}
			},
			async handleAddToCart( good, num) { //添加到购物车
				//遍历数组 整合所选备注
				if (Number(good.skuNums) > 1 || (good.tasteGroupList && good.tasteGroupList != '[]')) {
					await this.checkGroup()
				}
				var that = this;
				//判断购物车中已有餐品
				const index = that.cart.findIndex(item => {
					// if (that.group.length>0) {
					// 	//有备注属性情况
					// 	return (item.id === good.foodId) && (item.group === String(that.group)) && (item.unitKey === that.showUnits.unitKey)
					// } else {
					// 	//无备注属性情况
					// 	return item.id === good.foodId && (item.unitKey === that.showUnits.unitKey)
					// }
					return (item.id === good.foodId) && (item.group === String(that.group)) && (item
						.unitKey === that.showUnits.unitKey)
				})
				if (index > -1) {
					that.cart[index].number += num
					uni.setStorageSync('cart', JSON.parse(JSON.stringify(that.cart)))
				} else {
					that.addCart = true
					that.cart.push({
						id: good.foodId,
						cate_id: good.id,
						name: good.foodName,
						price: good.price,
						number: num,
						image: good.imgePath,
						group: String(that.group),
						showGroup: String(that.showGroup),
						showUnit: String(that.showUnits.unit),
						unitKey: that.showUnits.unitKey,
						takeoutPackagingFee: good.takeoutPackagingFee,
					})
					that.group = '';
					that.showGroup = '';
					that.showUnits = {};
					uni.setStorageSync('cart', JSON.parse(JSON.stringify(that.cart)))
					setTimeout(function() {
						that.addCart = false
					}, 500);

				}
			},
			handleReduceFromCart(good) {
				const index = this.cart.findIndex(item => item.id === good.foodId)
				this.cart[index].number -= 1
				if (this.cart[index].number <= 0) {
					this.cart.splice(index, 1)
				}
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			},

			//点击选规格 调用详情 
			showGoodDetailModal( good, type) {
				var that = this
				if (that.clickFlag) {
					return
				}
				that.clickFlag = true;
				that.group = '';
				that.showGroup = '';
				that.uni_request({
					url:  '/api/food/' + good.foodId,
					method: 'POST',
					success: (res) => {
						that.clickFlag = false;
						if (res.data.code == 0 || res.data.code == 200) {
							var data = res.data.data
							that.units = data.units
							that.good = JSON.parse(JSON.stringify({
								...data,
								number: 1
							}))
							

							if (that.units.length > 1) {
								//设置默认选中规格 多规格时弹出选择弹框
								for (var i = 0; i < that.units.length; i++) {
									if (i == 0) {
										that.units[i].is_default = 1
										that.showUnits = that.units[i]
									} else {
										that.units[i].is_default = 0
									}
								}
								that.goodDetailModalVisible = true
							} else {
								//设置默认选中规格 单规格时判断备注属性弹出选择弹框
								that.showUnits = that.units[0]
								that.good.price = that.showUnits.price
								if (type == 0) {
									that.goodDetailModalVisible = true
								} else {
									that.handleAddToCart( that.good, 1)
								}

							}
							//解析辅料备注数组
							if (that.good.tasteGroupList && that.good.tasteGroupList != '[]') {
								that.tasteGroupList = JSON.parse(JSON.parse(JSON.stringify(that.good
									.tasteGroupList)))
								//辅料备注数组新增选中属性 用于订单提交数组整合
								for (var k = 0; k < that.tasteGroupList.length; k++) {
									that.tasteGroupList[k].isChoose = ''
								}
								that.goodDetailModalVisible = true
							} else {
								that.tasteGroupList = [];
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e) {
						that.clickFlag = false;

					}
				})


			},
			closeGoodDetailModal() { //关闭餐品详情模态框
				this.goodDetailModalVisible = false
				
				this.good = {}
			},
			//选择备注属性
			changeGroupDefault(index, i) {
				if (this.tasteGroupList[index].detailList[i].isDefault == 0) { //未选中点击
					this.tasteGroupList[index].detailList[i].isDefault = '1';
					this.tasteGroupList[index].isChoose = [];
					for (var k = 0; k < this.tasteGroupList[index].detailList.length; k++) {
						if (this.tasteGroupList[index].detailList[k].isDefault == '1') {
							this.tasteGroupList[index].isChoose.push(this.tasteGroupList[index].detailList[k].notesName)
						}
					}
				} else { //已选中点击
					this.tasteGroupList[index].detailList[i].isDefault = '0';
					this.tasteGroupList[index].isChoose = '';
				}

			},
			changePropertyDefault(index) { //改变默认属性值
				for (var i = 0; i < this.units.length; i++) {
					this.units[i].is_default = 0
				}
				this.units[index].is_default = 1
				this.showUnits = this.units[index]
				this.good.number = 1
				this.$forceUpdate()
			},
			getGoodSelectedProps(good, type = 'text') { //计算当前餐品所选属性
				if (good.use_property) {
					let props = []
					good.property.forEach(({
						values
					}) => {
						values.forEach(value => {
							if (value.is_default) {
								props.push(type === 'text' ? value.value : value.id)
							}
						})
					})
					return type === 'text' ? props.join('，') : props
				}
				return ''
			},
			handlePropertyAdd() {
				this.good.number += 1
			},
			handlePropertyReduce() {
				if (this.good.number === 1) return
				this.good.number -= 1
			},
			handleAddToCartInModal(item) {
				const product = this.good;
				if (this.good.units.length == 1) {
					product.price = this.good.units[0].price
				} else {
					product.price = this.showUnits.price
				}
				this.handleAddToCart(product, this.good.number)
				this.closeGoodDetailModal()

			},
			//打开/关闭购物车列表popup
			openCartPopup() {
				this.cartPopupVisible = !this.cartPopupVisible
			},
			//清空购物车
			handleCartClear() {
				uni.showModal({
					title: '提示',
					content: '确定清空购物车么',
					success: ({
						confirm
					}) => {
						if (confirm) {
							this.cartPopupVisible = false
							this.cart = []
							uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
						}
					}
				})
			},
			handleCartItemAdd(index) {
				this.cart[index].number += 1
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			},
			handleCartItemReduce(index) {
				if (this.cart[index].number === 1) {
					this.cart.splice(index, 1)
				} else {
					this.cart[index].number -= 1
				}
				if (!this.cart.length) {
					this.cartPopupVisible = false
				}
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			},

			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},

			toPay() {
				if (this.getCartGoodsPrice <= 0) {
					uni.showToast({
						title: '请选择餐品~',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '加载中'
				})
				// uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
				
				uni.navigateTo({
					url: '/pages/pay/pay?data=' + JSON.stringify(this.cart) + '&shopId=' + this.shopId
				})
				
				uni.removeStorageSync('cart')
				this.cart = [];
				uni.hideLoading()
			}
		}
	};
</script>

<style lang="scss" scoped>

	page {
		background: #ffffff !important;
	}
	/deep/.popup-content{
		bottom: 0 !important;
	}
	.zw1{
		width: 100vw;height: 70px;
	}
	.zw{
		width: 100vw;height: 65px;
	}
	.priceTip{
		color: #999;margin-left: 5px;font-size: 13px;font-weight: normal;
	}
	.topSearch{
		padding: 15px 10px;background: #eeedeb !important;
		position: fixed;top: 0;width: 100vw;z-index: 9;
		display: flex;align-items: center;
		image{
			width: 25px;height: 25px; margin-right: 10px;
		}
	}
	.good-detail-modal {
		width: 100%;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
	
		.cover {
			// height: 320rpx;
			// padding: 30rpx 0;
			display: flex;
			// justify-content: center;
			// align-items: center;
			padding: 20px 10px;
			position: relative;
			position: sticky;
			top:0;
			.right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-bottom: 10rpx;
			}
			.image {
				width:160rpx;
				height: 160rpx;
				border-radius: 5px;
				margin-right: 10px;
			}
			.name{
				font-size: 18px;
				font-weight: 700;
			}
			.price {
				font-weight: 600;
				font-size: 25px;
				color: rgb(252,31,31);
				margin-right: 10rpx;
			}
			.btn-group {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	
		.detail {
			width: 100%;
			// min-height: 1vh;
			// max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
			height:calc(70vh - 250px);
	
			.wrapper {
				width: 100%;
				height: 100%;
				// overflow: hidden;
				
				.basic {
					padding: 0 20rpx 30rpx;
					display: flex;
					flex-direction: column;
					.tips {
						font-size: 14px;
						color: $text-color-grey;
					}
					.recommend_title{
						border-bottom: 1px solid rgb(250,250,250);
						margin: 40rpx 0 30rpx 150rpx;
						padding-bottom: 15rpx;
						text{
							color: rgb(254,174,27);
							font-size: 17px;
							font-weight: 600;
							font-family: "微软雅黑";
							padding-bottom: 15rpx;
							border-bottom: 5rpx solid rgb(254,174,27);
						}
					}
					.accessories{
						view{
							font-size: 17px;
							font-weight: 600;
							font-family: "微软雅黑";
						}
						.btn{
							font-size: 14px;
							font-weight: 500;
							width: 220rpx;
							height: 80rpx;
							background-color: rgba(244,244,244,0.9);
							border-radius: 5rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 20rpx;
						}
					}
					.ingredients{
						view{
							font-size: 17px;
							font-weight: 600;
							font-family: "微软雅黑";
						}
						.btn{
							font-size: 14px;
							font-weight: 500;
							width: 220rpx;
							height: 80rpx;
							background-color: rgba(244,244,244,0.9);
							border-radius: 5rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 20rpx;
						}
					}
					.notes{
						font-size: 18px;
						line-height: 90rpx;
					}
					.notes_input{
						height: 80rpx;
						background-color: rgb(247,248,250);
						padding-left: 20rpx;
					}
					.assess{
						margin-top: 70rpx;
						.assess_text{
							font-size: 18px
						}
						.assess_num{
							border-radius: 10rpx;
							background-color: rgb(255,241,217);
							padding: 0 10rpx;
							margin: 0 10rpx;
							font-size: 13px
						}
					}
					.items{
						height: 160rpx;
						display: flex;
						align-items: center;
						image{
							height: 80rpx;
							width:80rpx;
							border-radius: 50%;
						}
						.recommend{
							display:flex;
							align-items: center;
							border: 1rpx solid rgba(250,132,29,0.3);
							padding: 0 10rpx;
							margin-left: 15rpx;
							image{
								height: 25rpx;
								width:25rpx;
							}
							text{
								font-size: 12rpx;
								color: rgb(250,132,29);
								margin-left: 8rpx;
							}
						}
					}
				}
				
				.properties {
					width: 100%;
					border-top: 2rpx solid $bg-color-grey;
					padding: 10rpx 30rpx 0;
					display: flex;
					flex-direction: column;
					
					.property {
						width: 100%;
						display: flex;
						flex-direction: column;
						margin-bottom: 30rpx;
						padding-bottom: -16rpx;
						
						.title {
							width: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin-bottom: 20rpx;
							
							.name {
								font-size: 26rpx;
								color: $text-color-base;
								margin-right: 20rpx;
							}
							
							.desc {
								flex: 1;
								font-size: $font-size-sm;
								color: $color-primary;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
						
						.values {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							
							.value {
								border-radius: 8rpx;
								background-color: $bg-color-grey;
								padding: 16rpx 30rpx;
								font-size: 26rpx;
								color: $text-color-assist;
								margin-right: 16rpx;
								margin-bottom: 16rpx;
								border: 1px solid $bg-color-grey;
								
								&.default {
									background-color: rgba(141, 74, 50, 0.1);
									border: 1px solid #8d4a32;
									color: rgba(141, 74, 50, 1);
								}
							}
						}
					}
				}
			}
		}
		
		.action {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: $bg-color-grey;
			// height: 120rpx;
			padding: 25rpx 26rpx 0 26rpx;
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20rpx;
				overflow: hidden;
				
				.price {
					font-size: $font-size-lg;
					color: $text-color-base;
				}
	
				.props {
					color: $text-color-assist;
					font-size: 24rpx;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.btn-group {
				display: flex;
				align-items: center;
				justify-content: space-around;
	
				.number {
					font-size: $font-size-base;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
				}
	
				.btn {
					padding: 0;
					font-size: $font-size-base;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 100%;
				}
			}
		}
		.btnList{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
		}
		.add-to-cart-btn {
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			background-color:rgba(141,74,50,0.9);
			color: #ffffff;
			font-size: $font-size-base;
			height: 90rpx;
			border-radius: 5px;
			margin: 30rpx 0 0 ;
		}
		.buy-btn {
			display: flex;
			width: 48%;
			justify-content: center;
			align-items: center;
			color:rgba(141,74,50,0.9);
			border: 1px solid rgba(141,74,50,0.9);
			font-size: $font-size-base;
			height: 80rpx;
			border-radius: 5px;
			margin: 40rpx 0;
		}
	}
	
	.goodsList{
		padding: 20rpx;
		.good {
			width: 100%;
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;
				
			.image {
				width: 180rpx !important;
				height: 180rpx ;
				margin-right: 15rpx;border-radius: 8rpx;
			}
			.price_and_tip{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				padding-right: 7px;
				.name {
					font-size: $font-size-base;
					margin-bottom: 10rpx;
				}
				
				.tips {
					width: 100%;
					font-size: $font-size-sm;
					color: $text-color-assist;
					
				}
			}
			.right {
				width: calc(100% - 195rpx);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				height: 180rpx;
				position: relative;
				.name {
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.tips {
					width: 100%;
					
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 12px;
					
					color: $text-color-assist;
					
				}
				
				.price_and_action {
					position: absolute;
					bottom: 0;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				
					.price {
						font-size: $font-size-base;
						font-weight: 600;
						font-size: 20px;
						margin-left: 1px;
						color: rgb(252,31,31);
					}
				
					.btn-group {
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
				
						.btn {
							padding: 0 20rpx;
							box-sizing: border-box;
							font-size: $font-size-sm;
							height: 44rpx;
							line-height: 44rpx;
				
							&.property_btn {
								border-radius: 24rpx;
							}
				
							&.add_btn,
							&.reduce_btn {
								padding: 0;
								width: 44rpx;
								border-radius: 44rpx;
							}
						}
				
						.dot {
							position: absolute;
							background-color: #ee0000;
							color: #ffffff;
							font-size: $font-size-sm;
							width: 36rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 100%;
							right: -12rpx;
							top: -10rpx;
						}
				
						.number {
							width: 44rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
	
	
	.imgAnimation {
		animation: shake2 0.5s;
	}

	.btnAct {
		color: rgba(141, 74, 50, 0.9);
		border: 1px solid rgba(141, 74, 50, 0.9);
		background: rgba(141, 74, 50, 0.15) !important;
	}

	.imgBox {
		position: relative;

		.imgMark {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			top: 0;
			width: 100vw;
			padding: 10px;

			.imgLeft {
				image {
					width: 20px;
					height: 20px;
				}
			}

			.imgRight {
				image {
					width: 25px;
					height: 25px;
					margin-left: 20px;
				}
			}
		}

	}

	.topBox {
		width: 100vw;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		padding: 5px 15px;
		position: absolute;
		z-index: 9;
		background: #fff;
		bottom: 0;
		border-radius: 15px 15px 0 0;

		text {
			color: #000;
			font-size: 20px !important;
			letter-spacing: 1px;
			font-weight: bold;
		}

		a {
			color: #999;
			font-size: 13px !important;
		}

		image {
			width: 60px;
			height: 60px;
			border-radius: 8px;
			position: absolute;
			right: 10px;
			top: -10px;
		}

	}
	.cart-box {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100vw;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
		
		.cart-img {
			width: 110rpx;
			height: 110rpx;
			position: relative;
			margin-top: -40rpx;
			position:relative;
			
			animation-iteration-count: infinite;
		}
	
		
		@keyframes shake2 {
		0% { transform: translate(0, 0) rotate(0deg); }
		20% { transform: translate(-5px, 0) rotate(-5deg); }
		40% { transform: translate(5px, 0) rotate(5deg); }
		60% { transform: translate(-5px, 0) rotate(-5deg); }
		80% { transform: translate(5px, 0) rotate(5deg); }
		100% { transform: translate(0, 0) rotate(0deg); }
		}
		.pay-btn {
			height: 100%;
			padding: 0 60rpx;
			color: #FFFFFF;
			border-radius: 0;
			display: flex;
			align-items: center;
			font-size: $font-size-base;
		}
		
		.mark {
			padding-left: 46rpx;
			margin-right: 30rpx;
			position: relative;
			
			.tag {
				background-color: rgba(141, 74, 50, 1);
				color: $text-color-white;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $font-size-sm;
				position: absolute;
				right: 0;
				top: -45rpx;
				border-radius: 100%;
				padding: 4rpx;
				width: 40rpx;
				height: 40rpx;
				opacity: .9;
			}
		}
		
		.price {
			flex: 1;
			display: flex;align-items: flex-start;flex-direction: column;
			font-size: 23px;
			color: #000;
			.deliveryFee{
				font-size: 12px;color: #888;
			}
		}
		.iconText{font-size: 14px;margin-right: 2px;font-weight: bold;margin-bottom: 3px;}
	}
	
	.cart-popup {
		.top {
			background-color: rgba(141,74,50,0.5);
			color: #fff;
			padding: 15rpx 30rpx;
			font-size: 30rpx;
			display: flex;justify-content: space-between;align-items: center;
		}
		.cart-list {
			background-color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			min-height: 1vh;
			max-height: 60vh;
			
			.wrapper {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				margin-bottom: 156rpx;
				
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 0;
					position: relative;
					
					&::after {
						content: ' ';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: $border-color;
						height: 2rpx;
						transform: scaleY(.6);
					}
					
					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						margin-right: 30rpx;
						
						.name {
							font-size: 15px;
							color: #000;
						}
						.props {
							color: $text-color-assist;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					.center {
						margin-right: 120rpx;
						font-size: $font-size-base;
					}
					
					.right {
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.btn {
							width: 46rpx;
							height: 46rpx;
							border-radius: 100%;
							padding: 0;
							text-align: center;
							line-height: 46rpx;
						}
						
						.number {
							font-size: $font-size-base;
							width: 46rpx;
							height: 46rpx;
							text-align: center;
							line-height: 46rpx;
						}
					}
				}
			}
		}
	}
</style>